<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>我的评价</title>
    <link rel="icon" href="./img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./css/all.css"/>
    <link rel="stylesheet" type="text/css" href="./css/pages-seckillOrder.css"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <div id="nav-bottom">
        <!--顶部-->
        <div>
            <div class="nav-top">
                <div class="top">
                    <div class="py-container">
                        <div class="shortcut">
                            <ul class="fl">
                                <li class="f-item">商城欢迎您！</li>
                                <li class="f-item">{{odData[0].list.userName}} </li>
                            </ul>
                            <div class="fr typelist">
                                <ul class="types">
                                    <li class="f-item"><span>我的订单</span></li>

                                    <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                                    <li class="f-item"><span><a href="home.html" target="_blank">我的商城</a></span></li>
                                    <li class="f-item"><span>商城会员</span></li>
                                    <li class="f-item"><span>企业采购</span></li>
                                    <li class="f-item"><span>关注商城</span></li>
                                    <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span>
                                    </li>
                                    <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span>
                                    </li>
                                    <li class="f-item"><span><a href="home.html" target="_blank">个人中心</a></span></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>

                <!--头部-->
                <div class="header">
                    <div class="py-container">
                        <div class="yui3-g Logo">
                            <div class="yui3-u Left logoArea">
                                <a class="logo-bd" title="商城" href="index.html" target="_blank"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="account">
            <div class="py-container">
                <div>
                    <div class="yui3-g home">
                        <!--左侧列表-->
                        <div class="yui3-u-1-6 list">

                            <div class="person-info">
                                <div class="person-photo"><img src="./img/_/photo.png" alt=""></div>
                                <div class="person-account">
                                    <span class="name">{{odData[0].list.userName}}</span>
                                    <span class="safe">账户安全</span>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="list-items">
                                <dl>
                                    <dt><i>·</i> 订单中心</dt>
                                    <dd><a href="center-index.html">我的订单</a></dd>
                                    <dd><a href="center-order-pay.html">待付款</a></dd>
                                    <dd><a href="center-order-send.html">待发货</a></dd>
                                    <dd><a href="center-order-receive.html">待收货</a></dd>
                                    <dd><a href="center-order-evaluate.html">待评价</a></dd>
                                    <dd><a href="myselfcomment.html" class="list-active">已评价</a></dd>
                                </dl>
                                <dl>
                                    <dt><i>·</i> 我的中心</dt>
                                    <dd><a href="center-collect.html">我的收藏</a></dd>
                                    <dd><a href="center-footmark.html">我的足迹</a></dd>
                                </dl>
                                <dl>
                                    <dt><i>·</i> 物流消息</dt>
                                </dl>
                                <dl>
                                    <dt><i>·</i> 设置</dt>
                                    <dd><a href="center-setting-info.html">个人信息</a></dd>
                                    <dd><a href="center-setting-address.html">地址管理</a></dd>
                                    <dd><a href="center-setting-safe.html">安全管理</a></dd>
                                </dl>
                            </div>
                        </div>
                        <!--右侧主内容-->
                        <div class="yui3-u-5-6 order-pay">
                            <div class="body">
                                <div class="table-title">
                                    <table class="sui-table  order-table">
                                        <tr>
                                            <thead>
                                            <th width="35%">商品名称</th>
                                            <th width="35%">评价内容</th>
                                            <th width="15%">操作</th>
                                            </thead>
                                        </tr>
                                    </table>
                                </div>
                                <div class="order-detail">
                                    <div class="orders">
                                        <!--order1-->
                                        <div v-for="(item,i) in odData">
                                            <div class="choose-title">
                                                <label>
                                                    <span>{{item.createTime}}　订单编号：{{item.id}} </span>
                                                </label>
                                                <!--                                        <button @click="dele(item.id)" class="sui-btn btn-info share-btn">删除订单</button>-->
                                            </div>

<!--                                            <div v-for="item1 in cmData[i]">-->
                                                <table class="sui-table table-bordered order-datatable">
                                                    <tbody>
                                                    <tr>
                                                        <td width="35%">
                                                            <div class="typographic">
                                                                <img :src="item.cmm.image" height="120"  width="100"/>
                                                                <span href="#" class="block-text">{{item.cmm.name}}</span>
                                                            </div>
                                                        </td>
                                                        <td width="25%" class="center">
                                                            <ul class="unstyled">
                                                                <li>
                                                                    <span href="#" class="block-text">{{item.list.replyContent}}</span>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                        <el-dialog title="填写追评" :visible.sync="dialogTableVisible" >
                                                            <el-form :model="form">
                                                                <el-form-item label="追评"
                                                                              :label-width="formLabelWidth">
                                                                    <template slot-scope="scope">
                                                                    <el-input v-model="followContent"
                                                                              ></el-input>
                                                                        </template>
                                                                </el-form-item>
                                                                <el-form-item label="追评图片" :label-width="formLabelWidth">
                                                                    <el-upload
                                                                            style="width:150px;line-height: 150px;"
                                                                            class="avatar-uploader"
                                                                            action="/upload/native.do"
                                                                            :show-file-list="false"
                                                                            :on-success="handleAvatarSuccess"
                                                                            :before-upload="beforeAvatarUpload">
                                                                        <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                                                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                                    </el-upload>
                                                                </el-form-item>

                                                            </el-form>
                                                            <div slot="footer" class="dialog-footer">
                                                                <el-button @click="dialogTableVisible = false" >取 消
                                                                </el-button>
                                                                <el-button type="primary"
                                                                           @click="sendReply()"
                                                                           @click="dialogTableVisible = false">确 定
                                                                </el-button>
                                                            </div>

                                                        </el-dialog>

                                                        </el-form>
                                                        <td width="15%" class="center">
                                                            <ul class="unstyled">
                                                                <template>
                                                                    <el-button size="mini" type="success" size="small"
                                                                               @click="addReply(item.id)"
                                                                               class="sui-btn btn-info">追评
                                                                    </el-button>
                                                                </template>

                                                                <div class="line_01">--------</div>
                                                                <el-button size="mini" type="danger" size="small"
                                                                           @click="deletecomment(item.id)"
                                                                           class="sui-btn btn-info">
                                                                    删除
                                                                </el-button>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>

<!--                                            </div>-->
                                        </div>

                                        <div class="choose-order">

                                            <div class="sui-pagination pagination-large top-pages">
                                                <ul>
                                                    <li class="prev disabled"><a href="#">«上一页</a></li>
                                                    <li class="active"><a href="#">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li class="dotted"><span>...</span></li>
                                                    <li class="next"><a href="#">下一页»</a></li>
                                                </ul>
                                                <div><span>共10页&nbsp;</span><span>
                                                到
                                                <input type="text" class="page-num"><button class="page-confirm"
                                                                                            onclick="alert(1)">确定</button>
                                                页</span></div>
                                            </div>
                                        </div>

                                        <div class="clearfix"></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部栏位 -->

    </div>
</div>

</body>
</html>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                odData: [],
                cmData: [],
                currentPage: 1,
                size: 10,
                total: 10,
                ids: [],
                searchMap: {},
                followContent:'',
                dialogTableVisible: false,
                dialogFormVisible: false,
                lastClickId:'',
                imageUrl: '',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',

                },
                formLabelWidth: '150px'
            }
        },
        created() {
            this.fetchData();
            // this.fetchData1();
        },
        methods: {
            addReply(id) {
                if (this.lastClickId!==id && this.lastClick!==""){
                    this.imageUrl = ''
                    this.followContent=''
                }
                console.log(id);
                this.dialogTableVisible = true;
                this.lastClickId = id;
            },

            fetchData() {
                this.cmData = [];
                axios.get(`/productReply/findItemByUsername.do?page=${this.currentPage}&size=${this.size}`).then(response => {
                    this.odData = response.data.rows;
                    this.total = response.data.total;
                    console.log(this.odData);
                });
            },
            change(e){
                this.$forceUpdate();
            },
            sendReply(){
                // console.log(this.followContent)

                axios.post(`/productReply/follow.do`, {
                    "id":this.lastClickId,
                    "followContent":this.followContent,
                    "followImage":this.imageUrl
                    });
                this.dialogTableVisible = false;
            },
            review(id) {
                this.$prompt('请输入追评', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    this.$message({
                        type: 'success',
                        message: '追评成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            deletecomment(id) {
                this.$confirm('要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/order/delete.do?id=${id}`).then(response => {
                        if (response.data.code == 0) {
                            this.fetchData();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>